<template>
  <div class="goodsCard">
    <div>
      <div class="goodsCardHead">
        <span class="orderNum">订单号：{{goodsInfo.orderNum}}</span><span class="date floatRight">{{goodsInfo.date}}</span>
      </div>
      <div class="cardInfo clearboth" v-for="(item, index) in goodsInfo.list" :key="index">
        <img :src="item.imageUrl" alt="" class="cardInfoImg floatLeft">
        <div class="cardInfoRight" :style="{width: isShowSendBtn ? '300px' : '210px'}">
          <div class="clearboth">
            <span class="floatLeft cardInfoOrderTitle" :style="{width: isShowSendBtn ? '250px' : '148px'}">{{item.name}}</span>
            <span class="floatRight priceColor">{{item.price}}</span>
          </div>
          <div class="clearboth">
            <span class="floatLeft markContent" :style="{width: isShowSendBtn ? '263px' : '200px'}">{{item.desc}}</span>
            <!-- <el-button size="mini" class="floatleft sendBtn">发送</el-button> -->
          </div>
        </div>
      </div>
      <div class="clearboth cardInfoFoot">
        <div class="clearboth">
          <span class="floatLeft">订单总额：<span class="priceColor">{{goodsInfo.price}}</span></span>
          <span class="floatRight priceColor">{{goodsInfo.status}}</span>
        </div>
        <div class="clearboth" style="marginTop: 5px" v-if="isShowSendBtn && tabType === 'webchat_todo'">
          <el-button size="mini" class="floatRight sendBtn" @click="sendOrderFun">发送</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bus from '@/store/eventBus'
export default {
  name: 'goodsCard',
  props: {
    goodsInfo: {
      type: Object,
      default: function () {
        return {}
      }
    },
    isShowSendBtn: false, // 发送按钮的显示
  },
  computed: {
    tabType () {
      return this.$route.path.split('/')[3] || ''
    }
  },
  methods: {
    sendOrderFun () {
      bus.$emit('sendOrderInfoFun', this.goodsInfo)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .goodsCard
    width 100%
    background #FAFAFA
    border-radius 2px
    font-size 12px
    margin-bottom 10px
    .goodsCardHead
      padding 10px 10px 5px
      border-bottom 1px solid #E5E5E5
      .date
        color #999999
    .cardInfo
      padding 10px
      border-bottom 1px solid #E5E5E5
      .cardInfoImg
        width 56px
        height 56px
      .cardInfoRight
        float left
        margin-left 10px
        .cardInfoTitle
          width 208px
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 3
          -webkit-box-orient vertical
        .cardInfoOrderTitle
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 1
          -webkit-box-orient vertical
        .markContent
          color #595959
          margin-top 5px
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
        .sendBtn
          margin 10px 0px 0px 6px
    .cardInfoFoot
      padding 10px
      div
        padding 0px 0px 5px
.priceColor
  color #FF5C5C
.clearboth
  clear both
  overflow hidden
.floatLeft
  float left
.floatRight
  float right
</style>
